<template>
    <div class="login-container">
      <div class="login-box">
        <h2>欢迎登录</h2>
        <div class="input-group">
          <input type="text" v-model="username" placeholder="用户名" />
          <input type="password" v-model="password" placeholder="密码" />
          <div class="err">{{error}}</div>
        </div>
        <button class="login-btn" @click="handleLogin">登录</button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import axios from "axios"
  import {useRouter} from "vue-router"

  const username = ref('user123')
  const password = ref('pass123')
  const error=ref("")
  const router=useRouter()

  const handleLogin = () => {
        axios.get(" http://localhost:3000/users?username="+username.value).then(res=>{
            console.log(res.data)
            if(res.data.length==0){
                error.value="用户名错误"
            }else{
                if(res.data[0].password==password.value){
                    router.push({path:"/page"})
                }else{
                    error.value="密码错误"
                }
            }
        })
  }
  </script>
  
  <style scoped>
  .err{
    color: red;
  }
  .login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  
  }
  
  .login-box {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
  }
  
  h2 {
    text-align: center;
    color: #333;
    margin-bottom: 2rem;
  }
  
  .input-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  
  input {
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
  }
  
  input:focus {
    border-color: #4CAF50;
  }
  
  .login-btn {
    width: 100%;
    padding: 0.8rem;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .login-btn:hover {
    background-color: #45a049;
  }
  </style>